/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

.group_list {
  list-style: none;
  .group {
    .group_name {
      clear: left;
      position: relative;
      border-top: 1px dotted #aaa;
      padding-top: 5px;
      margin: 1em;
      margin-bottom: -2px;
      .management {
        float: left;
        position: absolute;
        right: 0;
      }
      .name {
        font-size: 1.5em;
        padding-left: 20px;
        background: url(/images/group.png) no-repeat center left;
      }
    }
    &.teacher_group {
      .name {
        background: url(/images/assignment.png) no-repeat center left;
      }
    }
    .group_info {
      margin-top: -2px;
      padding-left: 3em;
    }
    .member_list {
      list-style: none;
      max-height: 150px;
      overflow: auto;
    }
  }
}

.left_side {
  a.assign_students_link {
    display: none;
  }
}

.student-groups {
  border: 1px solid #c1c7cf;
  border-radius: 3px;
  .student-group-header {
    @include clearfix;
    padding: 16px 16px 16px 10px;
  }
  .icon-mini-arrow-right, .icon-mini-arrow-down {
    float: left;
    order: 1;
  }
  .icon-mini-arrow-down {
    display: none;
  }
  &.show-body {
    .student-group-header {
      background-color: #f5f5f5;
      border-bottom: 1px solid #c1c7cf;
      cursor: pointer;
      position: relative;
    }
    .icon-mini-arrow-right {
      display: none;
    }
    .icon-mini-arrow-down {
      display: block;
    }
  }
  .student-group-title {
    float: left;
    display: inline-flex;
    h3 {
      margin: 0 7px 0 5px;
      font-weight: bold;
      @include fontSize($ic-font-size--small);
      float: left;
      line-height: 18px;
      order: 2;
      small {
        @include fontSize($ic-font-size--xsmall);
      }
      a {
        color: #555;
      }
    }
    a {
      position: relative;
      top: -1px;
      padding-right: 5px;
      order: 2;
    }
  }
  .student-group-students {
    i {
      padding-right: 5px;
    }
    position: absolute;
    right: 175px;
    color: #555;
    font-weight: normal;
  }
  .student-group-join {
    position: absolute;
    text-transform: uppercase;
    font-weight: bold;
    right: 10px;
    text-align: right;
  }
  .student-group-body {
    padding: 16px 16px 16px 36px;
    &:last-child {
      border-bottom: 0;
    }
    .student-group-list {
      list-style: none;
      margin: 0;
      li {
        i {
          padding-left: 5px;
        }
        float: left;
        width: 25%;
      }
    }
  }
}

.empty-groupset-instructions {
  .group-categories-actions {
    top: 55px;
  }
}

.group-categories-actions {
  height: 36px;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 14px;
}

#group_categories_tabs {
  margin: 0 -1em -1em;
  > .collectionViewItems {
    padding: 10px 130px 0 1em;
  }
  > .roster-tab {
    padding-left: 1em;
    padding-right: 1em;
  }
}
// group switcher within left sub-nav
.al-trigger--within-left-menu {
  margin: 0 0 $ic-sp $ic-sp/2;

  &.ui-menu-item {
    max-width: 200px; //override the kyle menu width for this instance
  }
}
// don't let content overflow the width
.al-options {
  .ui-menu-item {
    a {
      box-sizing: border-box;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:first-of-type {
      margin-top: 8px;
    }
    &:last-of-type {
      margin-bottom: 8px;
    }
  }
}
// style the active group within the switcher
.active-selection.ui-menu-item .ui-corner-all {
  color: $ic-font-color--subdued;

  &.ui-state-focus,
  &:hover,
  &:focus {
    background: $ic-color-medium;
    color: $ic-font-color-light;
    font-weight: bold;
  }
}
// need to account for setting focus to the first option (if selected)
.active-selection.ui-menu-item:first-of-type {
  & .ui-corner-all.ui-state-focus {
    background: $ic-color-medium;
  }
}
